<template>
  <a-card>
    <div>
      <a-form layout="horizontal">
        <div class="fold">
          <a-row>
            <a-col :md="8" :sm="24">
              <a-form-item label="工号" :labelCol="{ span: 8 }" :wrapperCol="{ span: 15, offset: 1 }">
                <a-input v-model="accountNumber" placeholder="请输入" allowClear />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row v-if="advanced"> </a-row>
        </div>
        <span style="float: right; margin-top: 3px">
          <a-button type="primary" @click="query">查询</a-button>
        </span>
      </a-form>
    </div>
    <div>
      <a-space class="operator">
        <a-button @click="showModal(0)" type="primary">新增员工</a-button>
        <a-modal :visible="visible" title="编辑员工" @ok="handleOk" @cancel="handleCancel" width="800px">
          <a-form>
            <a-form-item :label="$t('id')" v-show="false">
              <a-input name="id" id="id" v-model="model.Id" v-show="false" />
            </a-form-item>
            <a-row>
              <a-col :span="24">
                <a-form-item :label-col="layout.labelCol" :wrapper-col="layout.wrapperCol" label="工号">
                  <a-input v-model="model.UserNo" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a-form-item :label-col="layout.labelCol" :wrapper-col="layout.wrapperCol" label="姓名">
                  <a-input v-model="model.UserName" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a-form-item :label-col="layout.labelCol" :wrapper-col="layout.wrapperCol" label="角色">
                  <a-select v-model="model.RoleId">
                    <a-select-option value="">请选择角色</a-select-option>
                    <a-select-option :value="item.Id" v-for="item in roleList" :key="item.key">
                      {{ item.Name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a-form-item :label-col="layout.labelCol" :wrapper-col="layout.wrapperCol" label="是否生效">
                  <a-switch :checked="model.IsValid" @change="changesx" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a-form-item :label-col="layout.labelCol" :wrapper-col="layout.wrapperCol" label="备注">
                  <a-input v-model="model.Memo" />
                </a-form-item>
              </a-col>
            </a-row>

          </a-form>
        </a-modal>
      </a-space>

      <a-table :columns="columns" :dataSource="dataSource" :pagination="pagination"
        :rowKey="(dataSource) => dataSource.Id">
        <template slot="time" slot-scope="text">
          {{ text | dateTimeFormat }}
        </template>
        <template slot="status" slot-scope="text">
          {{ text == 0 ? "否" : "是" }}
        </template>
        <div slot="action" slot-scope="text, record">
          <a @click="showModal(record.Id)">
            <a-icon type="edit" />
            编辑
          </a>
          <a-popconfirm title="是否删除" @confirm="remove(record.Id)">
            <a><a-icon type="delete" />删除</a>
          </a-popconfirm>
        </div>
      </a-table>
    </div>
  </a-card>
</template>

<script>
import { userService, roleService } from '/src/services'

const columns = [
  {
    title: '序号',
    customRender: (text, record, index) => `${index + 1}`,
  },
  {
    title: '工号',
    dataIndex: 'UserNo'
  },
  {
    title: '姓名',
    dataIndex: 'UserName'
  },
  {
    title: '角色',
    dataIndex: 'RoleName'
  },
  {
    title: '是否生效',
    dataIndex: 'IsValid',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '备注',
    dataIndex: 'Memo'
  },
  {
    title: '创建时间',
    dataIndex: 'CreateTime',
    scopedSlots: { customRender: 'time' }
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'UserList',
  filters: {
    dateTimeFormat(val) {
      if (val == null) return ''
      return val.substring(0, 10)
    }
  },
  data() {
    return {
      advanced: false,
      columns: columns,
      dataSource: [],
      selectedRows: [],
      bordered: true,
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        onChange: (current, pageSize) => {
          this.pagination.pageSize = pageSize
          this.pagination.current = current
          this.initData()
        }
      },
      accountNumber: '',
      checkedKeys: [],
      roleList: {},
      model: {},
      visible: false,
      layout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 }
      }
    }
  },
  watch: {
    checkedKeys: {
      handler(value) {
        if (value.length > 1 && value.find(item => item == '*')) {
          this.checkedKeys = ['*']
        }
        console.log(value)
      }
    }
  },
  mounted: function () {
    this.initData()
    this.getRole()
  },
  methods: {
    changesx(value) {
      this.model.IsValid = value
    },
    async initData() {
      this.dataSource = []
      let result = await userService.list(
        this.accountNumber,
        this.pagination.current,
        this.pagination.pageSize
      )
      if (result && result.data) {
        this.dataSource = result.data.data
        this.pagination.total = result.data.total
      }
    },
    async getRole() {
      let result = await roleService.getAll()
      if (result && result.data) {
        this.roleList = result.data
      }
    },
    query() {
      this.pagination.current = 1
      this.initData()
    },
    async showModal(id) {
      this.visible = true
      if (id !== 0) {
        this.id = id
        let model = await userService.detail(id)
        this.model = model.data
      } else {
        this.model = { Id: 0, IsValid: true }
        this.checkedKeys = []
      }
    },
    async handleOk() {
      if (this.model.RoleId == 0) {
        this.$message.error('保存失败')
        return
      }
      var res = await userService.save(this.model)
      if (res.data) {
        this.$message.success('保存成功')
        this.visible = false
        this.query()
      } else {
        this.$message.error('保存失败')
      }
    },
    handleCancel() {
      this.visible = false
    },
    async remove(id) {
      let result = await userService.remove(id)
      if (result.data) {
        this.$message.success("删除成功", 3)
        this.initData()
      }
    },
  }
}
</script>

<style lang="less" scoped>
.search {
  margin-bottom: 54px;
}

.fold {
  width: calc(100% - 216px);
  display: inline-block;
}

.operator {
  margin-bottom: 18px;
}

@media screen and (max-width: 900px) {
  .fold {
    width: 100%;
  }
}
</style>
